<template>
  <div class="analysis-data-filter">
    <!--头部-->
    <div class="header">
      <div>数据过滤配置</div>
      <a-tooltip>
        <template slot="title">取消过滤</template>
        <div
          :class="
            runningFilterPipelineId >= 0
              ? 'reset-button'
              : 'reset-button-disable'
          "
          @click="filterReset"
        >
          <a-icon-font type="iconchexiao" class="add-filter-icon" />
          <div>重置</div>
        </div>
      </a-tooltip>
    </div>

    <!--所有过滤组-->
    <div class="filter-groups">
      <filter-group
        v-for="group in filterGroups"
        ref="group"
        :key="group.id"
        :filter-group="group"
        :groups="filterGroups"
        @groupRename="groupRename"
        @deleteGroup="deleteGroup"
        @execute="executeFilter"
      />
    </div>

    <!--添加过滤按钮-->
    <div class="add-filter" @click="addFilter">
      <a-icon-font type="iconzengjia" class="add-filter-icon" />
      <div class="add-filter-text">添加过滤</div>
    </div>

    <!--过滤设置-->
    <filter-setting />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import FilterGroup from '@/components/right-drawer/data-filter/FilterGroup.vue'
import GraphAnalysis from '@/store/modules/graphanalysis'
import { FilterPipeline } from '@/components/right-drawer/data-filter/data-filter'
import FilterSetting from '@/components/right-drawer/data-filter/FilterSetting.vue'
// import {debounce} from 'lodash'

@Component({
  components: { FilterSetting, FilterGroup },
})
export default class DataFilter extends Vue {
  public mounted() {
    GraphAnalysis.queryGraphFilterPiplines({
      projectId: this.projectId,
      graphId: this.graphId,
    })
  }

  public beforeDestroy() {}

  // 获取所有过滤流程
  public get filterGroups() {
    return GraphAnalysis.graphFilters
  }

  // 项目id
  public get projectId() {
    return GraphAnalysis.projectId
  }

  // 图id
  public get graphId() {
    return GraphAnalysis.activeTabId
  }

  // 正在运行的过滤流程id
  public get runningFilterPipelineId() {
    return GraphAnalysis.runningFilterPipelineId
  }

  @Watch('graphId')
  public async watchData() {
    await GraphAnalysis.queryGraphFilterPiplines({
      projectId: this.projectId,
      graphId: this.graphId,
    })
    // 设置选中过滤器为空
    GraphAnalysis.setActiveFilter(null)
  }

  // 添加过滤组
  public async addFilter() {
    const reg = /过滤(\d+)$/
    let newNumber = 1
    // 找到现有过滤组中带有过滤*的过滤组名字
    this.filterGroups.forEach((filter) => {
      const match = reg.exec(filter.name)
      if (match !== null) {
        const number = Number.parseInt(match[1].trim(), 10)
        newNumber = Math.max(number, newNumber)
      }
    })

    const response = await GraphAnalysis.addGraphFilterPipline({
      projectId: this.projectId,
      graphId: this.graphId,
      name: `过滤${newNumber + 1}`,
    })

    if (response.code === 100) {
      await GraphAnalysis.queryGraphFilterPiplines({
        projectId: this.projectId,
        graphId: this.graphId,
      })
    }
  }

  // 过滤组重命名
  public async groupRename(filterGroup: FilterPipeline | null) {
    if (filterGroup === null) {
      return
    }

    const success = await GraphAnalysis.updateGraphFilterPipline({
      ...filterGroup,
    })

    if (success) {
      GraphAnalysis.queryGraphFilterPiplines({
        projectId: this.projectId,
        graphId: this.graphId,
      })
    }
  }

  // 删除过滤组
  public async deleteGroup(id: number) {
    const success = await GraphAnalysis.deleteGraphFilterPipline({
      projectId: this.projectId,
      graphId: this.graphId,
      id,
    })

    if (success) {
      GraphAnalysis.queryGraphFilterPiplines({
        projectId: this.projectId,
        graphId: this.graphId,
      })
    }
  }

  // 执行过滤组
  public async executeFilter(filterGroupId: number | null) {
    if (filterGroupId === null) {
      return
    }
    this.$emit('data-filter-run')
  }

  // 重置过滤器
  public async filterReset() {
    // 如果没有正在运行的过滤流程
    if (GraphAnalysis.runningFilterPipelineId < 0) {
      return
    }

    const { success } = await GraphAnalysis.resetFilterPipeline({
      projectId: this.projectId,
      graphId: this.graphId,
    })

    if (success) {
      GraphAnalysis.setRunningFilterPipelineId(-1)

      // 空运行，重新加载一下数据
      this.$emit('data-filter-run')
    }
  }
}
</script>

<style scoped lang="less">
.analysis-data-filter {
  align-items: center;
  background-color: #f9f9fc;
  display: flex;
  flex-direction: column;
  height: calc(100%);
  width: 100%;
}

.header {
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
  display: flex;
  font-weight: 700;
  padding: 10px 20px;
  width: 100%;
}

.reset-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  width: 55px;

  &:hover {
    color: #6a74ff;
  }
}

.reset-button-disable {
  align-items: center;
  cursor: not-allowed;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  width: 55px;
}

.filter-groups {
  overflow: auto;
  width: 100%;

  // 滚动条样式
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}

.add-filter {
  align-items: center;
  color: #5d637e;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  justify-content: center;
  letter-spacing: 1px;
  padding-top: 10px;
  width: 100%;

  &:hover {
    color: #6a74ff;
  }

  .add-filter-icon {
    font-size: 16px;
  }

  .add-filter-text {
    margin-left: 10px;
    // 文本不可选中
    user-select: none;
  }
}
</style>
<style>
  .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-selected) .ant-select-selected-icon {
    color: transparent;
  }
</style>